<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./iconcool.js"></script>
  <style>
    html,
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    .container {
      margin: 0 auto;
      padding: 50px;
      width: 980px;
    }
    .container .page-title {
      margin: 0;
      padding: 0;
    }
    .container .page-title .logo {
      height: 50px;
    }
    .tab-wrapper {
      padding-top: 26px;
      border-bottom: 1px solid #dcdee5;
      overflow: hidden;
    }
    .tab-wrapper .tab-panel {
      float: left;
      padding: 9px;
      min-width: 124px;
      font-size: 16px;
      color: #979ba5;
      text-align: center;
      cursor: pointer;
    }
    .tab-wrapper .tab-panel.active {
      color: #313238;
      border-bottom: 3px solid #361ec6;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    .icon-list .icon-item {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      color: #313238;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .icon-item .icon {
      display: inline-block;
      height: 92px;
      line-height: 92px;
      font-size: 44px;
    }
    .icon-list .icon-text {
      margin: 0;
      font-size: 14px;
      word-break: break-all;
    }
    .icon-list .colorful-icon {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .colorful-icon .icon {
      display: block;
      margin: 0 auto;
      width: 1em;
      height: 92px;
      font-size: 44px;
    }
    .describe-title {
      margin: 60px 0 0;
      padding-bottom: 10px;
      font-size: 20px;
      font-weight: normal;
      color: #313238;
      border-bottom: 1px solid #dcdee5;
    }
    .use-describe {
      padding-left: 20px;
    }
    .use-describe li {
      margin-top: 20px;
      font-size: 14px;
      color: #313238;
      line-height: 20px;
    }
  </style>
  <title>Icon Cool</title>
</head>
<body>
  <div class="container">
    <h2 class="page-title">
      <img class="logo" src="">
    </h2>
    <div class="tab-wrapper">
      <div class="tab-panel active" data-type="singleColor">单色图标</div>
      <div class="tab-panel"  data-type="multipleColor">彩色图标</div>
    </div>
    <section class="tab-content single-color active" data-type="singleColor">
      <ul class="icon-list">
        <li class="icon-item" title="feature-conversion">
          <span class="icon paasng-icon paasng-feature-conversion"></span>
          <p class="icon-text">feature-conversion</p>
        </li>
        <li class="icon-item" title="link">
          <span class="icon paasng-icon paasng-link"></span>
          <p class="icon-text">link</p>
        </li>
        <li class="icon-item" title="remind">
          <span class="icon paasng-icon paasng-remind"></span>
          <p class="icon-text">remind</p>
        </li>
        <li class="icon-item" title="stop-fill">
          <span class="icon paasng-icon paasng-stop-fill"></span>
          <p class="icon-text">stop-fill</p>
        </li>
        <li class="icon-item" title="info-line">
          <span class="icon paasng-icon paasng-info-line"></span>
          <p class="icon-text">info-line</p>
        </li>
        <li class="icon-item" title="info-fill">
          <span class="icon paasng-icon paasng-info-fill"></span>
          <p class="icon-text">info-fill</p>
        </li>
        <li class="icon-item" title="return-small">
          <span class="icon paasng-icon paasng-return-small"></span>
          <p class="icon-text">return-small</p>
        </li>
        <li class="icon-item" title="edit-2">
          <span class="icon paasng-icon paasng-edit-2"></span>
          <p class="icon-text">edit-2</p>
        </li>
        <li class="icon-item" title="process-file">
          <span class="icon paasng-icon paasng-process-file"></span>
          <p class="icon-text">process-file</p>
        </li>
        <li class="icon-item" title="bukeyulan">
          <span class="icon paasng-icon paasng-bukeyulan"></span>
          <p class="icon-text">bukeyulan</p>
        </li>
        <li class="icon-item" title="github-logo">
          <span class="icon paasng-icon paasng-github-logo"></span>
          <p class="icon-text">github-logo</p>
        </li>
        <li class="icon-item" title="check-small">
          <span class="icon paasng-icon paasng-check-small"></span>
          <p class="icon-text">check-small</p>
        </li>
        <li class="icon-item" title="template-fill">
          <span class="icon paasng-icon paasng-template-fill"></span>
          <p class="icon-text">template-fill</p>
        </li>
        <li class="icon-item" title="list-fill">
          <span class="icon paasng-icon paasng-list-fill"></span>
          <p class="icon-text">list-fill</p>
        </li>
        <li class="icon-item" title="debug-fill">
          <span class="icon paasng-icon paasng-debug-fill"></span>
          <p class="icon-text">debug-fill</p>
        </li>
        <li class="icon-item" title="configuration-line">
          <span class="icon paasng-icon paasng-configuration-line"></span>
          <p class="icon-text">configuration-line</p>
        </li>
        <li class="icon-item" title="diff-line">
          <span class="icon paasng-icon paasng-diff-line"></span>
          <p class="icon-text">diff-line</p>
        </li>
        <li class="icon-item" title="correct">
          <span class="icon paasng-icon paasng-correct"></span>
          <p class="icon-text">correct</p>
        </li>
        <li class="icon-item" title="branch-line">
          <span class="icon paasng-icon paasng-branch-line"></span>
          <p class="icon-text">branch-line</p>
        </li>
        <li class="icon-item" title="analysis">
          <span class="icon paasng-icon paasng-analysis"></span>
          <p class="icon-text">analysis</p>
        </li>
        <li class="icon-item" title="dashboard">
          <span class="icon paasng-icon paasng-dashboard"></span>
          <p class="icon-text">dashboard</p>
        </li>
        <li class="icon-item" title="diamond">
          <span class="icon paasng-icon paasng-diamond"></span>
          <p class="icon-text">diamond</p>
        </li>
        <li class="icon-item" title="chip">
          <span class="icon paasng-icon paasng-chip"></span>
          <p class="icon-text">chip</p>
        </li>
        <li class="icon-item" title="current-source-type">
          <span class="icon paasng-icon paasng-current-source-type"></span>
          <p class="icon-text">current-source-type</p>
        </li>
        <li class="icon-item" title="double-arrow-right">
          <span class="icon paasng-icon paasng-double-arrow-right"></span>
          <p class="icon-text">double-arrow-right</p>
        </li>
        <li class="icon-item" title="external-link">
          <span class="icon paasng-icon paasng-external-link"></span>
          <p class="icon-text">external-link</p>
        </li>
        <li class="icon-item" title="funnel">
          <span class="icon paasng-icon paasng-funnel"></span>
          <p class="icon-text">funnel</p>
        </li>
        <li class="icon-item" title="gear">
          <span class="icon paasng-icon paasng-gear"></span>
          <p class="icon-text">gear</p>
        </li>
        <li class="icon-item" title="dynamic-line">
          <span class="icon paasng-icon paasng-dynamic-line"></span>
          <p class="icon-text">dynamic-line</p>
        </li>
        <li class="icon-item" title="general-copy">
          <span class="icon paasng-icon paasng-general-copy"></span>
          <p class="icon-text">general-copy</p>
        </li>
        <li class="icon-item" title="general-sort">
          <span class="icon paasng-icon paasng-general-sort"></span>
          <p class="icon-text">general-sort</p>
        </li>
        <li class="icon-item" title="gitlab">
          <span class="icon paasng-icon paasng-gitlab"></span>
          <p class="icon-text">gitlab</p>
        </li>
        <li class="icon-item" title="help">
          <span class="icon paasng-icon paasng-help"></span>
          <p class="icon-text">help</p>
        </li>
        <li class="icon-item" title="icon-close">
          <span class="icon paasng-icon paasng-icon-close"></span>
          <p class="icon-text">icon-close</p>
        </li>
        <li class="icon-item" title="icon-more">
          <span class="icon paasng-icon paasng-icon-more"></span>
          <p class="icon-text">icon-more</p>
        </li>
        <li class="icon-item" title="icon-search">
          <span class="icon paasng-icon paasng-icon-search"></span>
          <p class="icon-text">icon-search</p>
        </li>
        <li class="icon-item" title="info-danger">
          <span class="icon paasng-icon paasng-info-danger"></span>
          <p class="icon-text">info-danger</p>
        </li>
        <li class="icon-item" title="jump-link">
          <span class="icon paasng-icon paasng-jump-link"></span>
          <p class="icon-text">jump-link</p>
        </li>
        <li class="icon-item" title="keys">
          <span class="icon paasng-icon paasng-keys"></span>
          <p class="icon-text">keys</p>
        </li>
        <li class="icon-item" title="logo">
          <span class="icon paasng-icon paasng-logo"></span>
          <p class="icon-text">logo</p>
        </li>
        <li class="icon-item" title="market-line">
          <span class="icon paasng-icon paasng-market-line"></span>
          <p class="icon-text">market-line</p>
        </li>
        <li class="icon-item" title="metrics">
          <span class="icon paasng-icon paasng-metrics"></span>
          <p class="icon-text">metrics</p>
        </li>
        <li class="icon-item" title="modules">
          <span class="icon paasng-icon paasng-modules"></span>
          <p class="icon-text">modules</p>
        </li>
        <li class="icon-item" title="monitor-fill">
          <span class="icon paasng-icon paasng-monitor-fill"></span>
          <p class="icon-text">monitor-fill</p>
        </li>
        <li class="icon-item" title="monitor">
          <span class="icon paasng-icon paasng-monitor"></span>
          <p class="icon-text">monitor</p>
        </li>
        <li class="icon-item" title="pa-arrow-left">
          <span class="icon paasng-icon paasng-pa-arrow-left"></span>
          <p class="icon-text">pa-arrow-left</p>
        </li>
        <li class="icon-item" title="paas-remind-fill">
          <span class="icon paasng-icon paasng-paas-remind-fill"></span>
          <p class="icon-text">paas-remind-fill</p>
        </li>
        <li class="icon-item" title="pack-up">
          <span class="icon paasng-icon paasng-pack-up"></span>
          <p class="icon-text">pack-up</p>
        </li>
        <li class="icon-item" title="pass">
          <span class="icon paasng-icon paasng-pass"></span>
          <p class="icon-text">pass</p>
        </li>
        <li class="icon-item" title="plus-thick">
          <span class="icon paasng-icon paasng-plus-thick"></span>
          <p class="icon-text">plus-thick</p>
        </li>
        <li class="icon-item" title="ps-arrow-down">
          <span class="icon paasng-icon paasng-ps-arrow-down"></span>
          <p class="icon-text">ps-arrow-down</p>
        </li>
        <li class="icon-item" title="ps-arrow-right">
          <span class="icon paasng-icon paasng-ps-arrow-right"></span>
          <p class="icon-text">ps-arrow-right</p>
        </li>
        <li class="icon-item" title="ps-arrow-up">
          <span class="icon paasng-icon paasng-ps-arrow-up"></span>
          <p class="icon-text">ps-arrow-up</p>
        </li>
        <li class="icon-item" title="reject">
          <span class="icon paasng-icon paasng-reject"></span>
          <p class="icon-text">reject</p>
        </li>
        <li class="icon-item" title="security">
          <span class="icon paasng-icon paasng-security"></span>
          <p class="icon-text">security</p>
        </li>
        <li class="icon-item" title="squares">
          <span class="icon paasng-icon paasng-squares"></span>
          <p class="icon-text">squares</p>
        </li>
        <li class="icon-item" title="star-line">
          <span class="icon paasng-icon paasng-star-line"></span>
          <p class="icon-text">star-line</p>
        </li>
        <li class="icon-item" title="stick">
          <span class="icon paasng-icon paasng-stick"></span>
          <p class="icon-text">stick</p>
        </li>
        <li class="icon-item" title="unfold">
          <span class="icon paasng-icon paasng-unfold"></span>
          <p class="icon-text">unfold</p>
        </li>
        <li class="icon-item" title="volumn">
          <span class="icon paasng-icon paasng-volumn"></span>
          <p class="icon-text">volumn</p>
        </li>
        <li class="icon-item" title="window-source-code">
          <span class="icon paasng-icon paasng-window-source-code"></span>
          <p class="icon-text">window-source-code</p>
        </li>
        <li class="icon-item" title="angle-double-down">
          <span class="icon paasng-icon paasng-angle-double-down"></span>
          <p class="icon-text">angle-double-down</p>
        </li>
        <li class="icon-item" title="angle-double-left">
          <span class="icon paasng-icon paasng-angle-double-left"></span>
          <p class="icon-text">angle-double-left</p>
        </li>
        <li class="icon-item" title="angle-down">
          <span class="icon paasng-icon paasng-angle-down"></span>
          <p class="icon-text">angle-down</p>
        </li>
        <li class="icon-item" title="angle-double-right">
          <span class="icon paasng-icon paasng-angle-double-right"></span>
          <p class="icon-text">angle-double-right</p>
        </li>
        <li class="icon-item" title="angle-left">
          <span class="icon paasng-icon paasng-angle-left"></span>
          <p class="icon-text">angle-left</p>
        </li>
        <li class="icon-item" title="angle-double-up">
          <span class="icon paasng-icon paasng-angle-double-up"></span>
          <p class="icon-text">angle-double-up</p>
        </li>
        <li class="icon-item" title="angle-up">
          <span class="icon paasng-icon paasng-angle-up"></span>
          <p class="icon-text">angle-up</p>
        </li>
        <li class="icon-item" title="apps-shape">
          <span class="icon paasng-icon paasng-apps-shape"></span>
          <p class="icon-text">apps-shape</p>
        </li>
        <li class="icon-item" title="apps">
          <span class="icon paasng-icon paasng-apps"></span>
          <p class="icon-text">apps</p>
        </li>
        <li class="icon-item" title="angle-right">
          <span class="icon paasng-icon paasng-angle-right"></span>
          <p class="icon-text">angle-right</p>
        </li>
        <li class="icon-item" title="area-chart">
          <span class="icon paasng-icon paasng-area-chart"></span>
          <p class="icon-text">area-chart</p>
        </li>
        <li class="icon-item" title="arrows-down-circle">
          <span class="icon paasng-icon paasng-arrows-down-circle"></span>
          <p class="icon-text">arrows-down-circle</p>
        </li>
        <li class="icon-item" title="arrows-down-shape">
          <span class="icon paasng-icon paasng-arrows-down-shape"></span>
          <p class="icon-text">arrows-down-shape</p>
        </li>
        <li class="icon-item" title="arrows-down">
          <span class="icon paasng-icon paasng-arrows-down"></span>
          <p class="icon-text">arrows-down</p>
        </li>
        <li class="icon-item" title="arrows-left-circle">
          <span class="icon paasng-icon paasng-arrows-left-circle"></span>
          <p class="icon-text">arrows-left-circle</p>
        </li>
        <li class="icon-item" title="arrows-left">
          <span class="icon paasng-icon paasng-arrows-left"></span>
          <p class="icon-text">arrows-left</p>
        </li>
        <li class="icon-item" title="arrows-right-circle">
          <span class="icon paasng-icon paasng-arrows-right-circle"></span>
          <p class="icon-text">arrows-right-circle</p>
        </li>
        <li class="icon-item" title="arrows-right">
          <span class="icon paasng-icon paasng-arrows-right"></span>
          <p class="icon-text">arrows-right</p>
        </li>
        <li class="icon-item" title="arrows-up-circle">
          <span class="icon paasng-icon paasng-arrows-up-circle"></span>
          <p class="icon-text">arrows-up-circle</p>
        </li>
        <li class="icon-item" title="arrows-up">
          <span class="icon paasng-icon paasng-arrows-up"></span>
          <p class="icon-text">arrows-up</p>
        </li>
        <li class="icon-item" title="back-shape">
          <span class="icon paasng-icon paasng-back-shape"></span>
          <p class="icon-text">back-shape</p>
        </li>
        <li class="icon-item" title="back">
          <span class="icon paasng-icon paasng-back"></span>
          <p class="icon-text">back</p>
        </li>
        <li class="icon-item" title="back2">
          <span class="icon paasng-icon paasng-back2"></span>
          <p class="icon-text">back2</p>
        </li>
        <li class="icon-item" title="bar-chart">
          <span class="icon paasng-icon paasng-bar-chart"></span>
          <p class="icon-text">bar-chart</p>
        </li>
        <li class="icon-item" title="bk">
          <span class="icon paasng-icon paasng-bk"></span>
          <p class="icon-text">bk</p>
        </li>
        <li class="icon-item" title="block-shape">
          <span class="icon paasng-icon paasng-block-shape"></span>
          <p class="icon-text">block-shape</p>
        </li>
        <li class="icon-item" title="calendar-shape">
          <span class="icon paasng-icon paasng-calendar-shape"></span>
          <p class="icon-text">calendar-shape</p>
        </li>
        <li class="icon-item" title="calendar">
          <span class="icon paasng-icon paasng-calendar"></span>
          <p class="icon-text">calendar</p>
        </li>
        <li class="icon-item" title="chain">
          <span class="icon paasng-icon paasng-chain"></span>
          <p class="icon-text">chain</p>
        </li>
        <li class="icon-item" title="check-1">
          <span class="icon paasng-icon paasng-check-1"></span>
          <p class="icon-text">check-1</p>
        </li>
        <li class="icon-item" title="check-circle-shape">
          <span class="icon paasng-icon paasng-check-circle-shape"></span>
          <p class="icon-text">check-circle-shape</p>
        </li>
        <li class="icon-item" title="check-circle">
          <span class="icon paasng-icon paasng-check-circle"></span>
          <p class="icon-text">check-circle</p>
        </li>
        <li class="icon-item" title="circle-2-1">
          <span class="icon paasng-icon paasng-circle-2-1"></span>
          <p class="icon-text">circle-2-1</p>
        </li>
        <li class="icon-item" title="circle-4-1">
          <span class="icon paasng-icon paasng-circle-4-1"></span>
          <p class="icon-text">circle-4-1</p>
        </li>
        <li class="icon-item" title="circle-shape">
          <span class="icon paasng-icon paasng-circle-shape"></span>
          <p class="icon-text">circle-shape</p>
        </li>
        <li class="icon-item" title="circle">
          <span class="icon paasng-icon paasng-circle"></span>
          <p class="icon-text">circle</p>
        </li>
        <li class="icon-item" title="clipboard-shape">
          <span class="icon paasng-icon paasng-clipboard-shape"></span>
          <p class="icon-text">clipboard-shape</p>
        </li>
        <li class="icon-item" title="clipboard">
          <span class="icon paasng-icon paasng-clipboard"></span>
          <p class="icon-text">clipboard</p>
        </li>
        <li class="icon-item" title="clock-shape">
          <span class="icon paasng-icon paasng-clock-shape"></span>
          <p class="icon-text">clock-shape</p>
        </li>
        <li class="icon-item" title="clock">
          <span class="icon paasng-icon paasng-clock"></span>
          <p class="icon-text">clock</p>
        </li>
        <li class="icon-item" title="close-circle-shape">
          <span class="icon paasng-icon paasng-close-circle-shape"></span>
          <p class="icon-text">close-circle-shape</p>
        </li>
        <li class="icon-item" title="close-circle">
          <span class="icon paasng-icon paasng-close-circle"></span>
          <p class="icon-text">close-circle</p>
        </li>
        <li class="icon-item" title="close">
          <span class="icon paasng-icon paasng-close"></span>
          <p class="icon-text">close</p>
        </li>
        <li class="icon-item" title="close3-shape">
          <span class="icon paasng-icon paasng-close3-shape"></span>
          <p class="icon-text">close3-shape</p>
        </li>
        <li class="icon-item" title="code">
          <span class="icon paasng-icon paasng-code"></span>
          <p class="icon-text">code</p>
        </li>
        <li class="icon-item" title="cog-shape">
          <span class="icon paasng-icon paasng-cog-shape"></span>
          <p class="icon-text">cog-shape</p>
        </li>
        <li class="icon-item" title="cog">
          <span class="icon paasng-icon paasng-cog"></span>
          <p class="icon-text">cog</p>
        </li>
        <li class="icon-item" title="cry">
          <span class="icon paasng-icon paasng-cry"></span>
          <p class="icon-text">cry</p>
        </li>
        <li class="icon-item" title="dashboard-2-shape">
          <span class="icon paasng-icon paasng-dashboard-2-shape"></span>
          <p class="icon-text">dashboard-2-shape</p>
        </li>
        <li class="icon-item" title="dashboard-2">
          <span class="icon paasng-icon paasng-dashboard-2"></span>
          <p class="icon-text">dashboard-2</p>
        </li>
        <li class="icon-item" title="dashboard-shape">
          <span class="icon paasng-icon paasng-dashboard-shape"></span>
          <p class="icon-text">dashboard-shape</p>
        </li>
        <li class="icon-item" title="dashboard-2">
          <span class="icon paasng-icon paasng-dashboard-2"></span>
          <p class="icon-text">dashboard-2</p>
        </li>
        <li class="icon-item" title="data-shape">
          <span class="icon paasng-icon paasng-data-shape"></span>
          <p class="icon-text">data-shape</p>
        </li>
        <li class="icon-item" title="data">
          <span class="icon paasng-icon paasng-data"></span>
          <p class="icon-text">data</p>
        </li>
        <li class="icon-item" title="data2-shape">
          <span class="icon paasng-icon paasng-data2-shape"></span>
          <p class="icon-text">data2-shape</p>
        </li>
        <li class="icon-item" title="data2">
          <span class="icon paasng-icon paasng-data2"></span>
          <p class="icon-text">data2</p>
        </li>
        <li class="icon-item" title="dedent">
          <span class="icon paasng-icon paasng-dedent"></span>
          <p class="icon-text">dedent</p>
        </li>
        <li class="icon-item" title="delete">
          <span class="icon paasng-icon paasng-delete"></span>
          <p class="icon-text">delete</p>
        </li>
        <li class="icon-item" title="dialogue-empty-shape">
          <span class="icon paasng-icon paasng-dialogue-empty-shape"></span>
          <p class="icon-text">dialogue-empty-shape</p>
        </li>
        <li class="icon-item" title="dialogue-empty">
          <span class="icon paasng-icon paasng-dialogue-empty"></span>
          <p class="icon-text">dialogue-empty</p>
        </li>
        <li class="icon-item" title="dialogue-shape">
          <span class="icon paasng-icon paasng-dialogue-shape"></span>
          <p class="icon-text">dialogue-shape</p>
        </li>
        <li class="icon-item" title="dialogue">
          <span class="icon paasng-icon paasng-dialogue"></span>
          <p class="icon-text">dialogue</p>
        </li>
        <li class="icon-item" title="dispirited">
          <span class="icon paasng-icon paasng-dispirited"></span>
          <p class="icon-text">dispirited</p>
        </li>
        <li class="icon-item" title="docker">
          <span class="icon paasng-icon paasng-docker"></span>
          <p class="icon-text">docker</p>
        </li>
        <li class="icon-item" title="down-shape">
          <span class="icon paasng-icon paasng-down-shape"></span>
          <p class="icon-text">down-shape</p>
        </li>
        <li class="icon-item" title="import">
          <span class="icon paasng-icon paasng-import"></span>
          <p class="icon-text">import</p>
        </li>
        <li class="icon-item" title="edit">
          <span class="icon paasng-icon paasng-edit"></span>
          <p class="icon-text">edit</p>
        </li>
        <li class="icon-item" title="edit2">
          <span class="icon paasng-icon paasng-edit2"></span>
          <p class="icon-text">edit2</p>
        </li>
        <li class="icon-item" title="ellipsis">
          <span class="icon paasng-icon paasng-ellipsis"></span>
          <p class="icon-text">ellipsis</p>
        </li>
        <li class="icon-item" title="email-shape">
          <span class="icon paasng-icon paasng-email-shape"></span>
          <p class="icon-text">email-shape</p>
        </li>
        <li class="icon-item" title="email">
          <span class="icon paasng-icon paasng-email"></span>
          <p class="icon-text">email</p>
        </li>
        <li class="icon-item" title="empty-shape">
          <span class="icon paasng-icon paasng-empty-shape"></span>
          <p class="icon-text">empty-shape</p>
        </li>
        <li class="icon-item" title="empty">
          <span class="icon paasng-icon paasng-empty"></span>
          <p class="icon-text">empty</p>
        </li>
        <li class="icon-item" title="end">
          <span class="icon paasng-icon paasng-end"></span>
          <p class="icon-text">end</p>
        </li>
        <li class="icon-item" title="exclamation-circle-shape">
          <span class="icon paasng-icon paasng-exclamation-circle-shape"></span>
          <p class="icon-text">exclamation-circle-shape</p>
        </li>
        <li class="icon-item" title="exclamation-circle">
          <span class="icon paasng-icon paasng-exclamation-circle"></span>
          <p class="icon-text">exclamation-circle</p>
        </li>
        <li class="icon-item" title="exclamation-triangle-shape">
          <span class="icon paasng-icon paasng-exclamation-triangle-shape"></span>
          <p class="icon-text">exclamation-triangle-shape</p>
        </li>
        <li class="icon-item" title="exclamation-triangle">
          <span class="icon paasng-icon paasng-exclamation-triangle"></span>
          <p class="icon-text">exclamation-triangle</p>
        </li>
        <li class="icon-item" title="exclamation">
          <span class="icon paasng-icon paasng-exclamation"></span>
          <p class="icon-text">exclamation</p>
        </li>
        <li class="icon-item" title="execute">
          <span class="icon paasng-icon paasng-execute"></span>
          <p class="icon-text">execute</p>
        </li>
        <li class="icon-item" title="eye-shape">
          <span class="icon paasng-icon paasng-eye-shape"></span>
          <p class="icon-text">eye-shape</p>
        </li>
        <li class="icon-item" title="eye-slash-shape">
          <span class="icon paasng-icon paasng-eye-slash-shape"></span>
          <p class="icon-text">eye-slash-shape</p>
        </li>
        <li class="icon-item" title="eye-slash">
          <span class="icon paasng-icon paasng-eye-slash"></span>
          <p class="icon-text">eye-slash</p>
        </li>
        <li class="icon-item" title="eye">
          <span class="icon paasng-icon paasng-eye"></span>
          <p class="icon-text">eye</p>
        </li>
        <li class="icon-item" title="file-plus-shape">
          <span class="icon paasng-icon paasng-file-plus-shape"></span>
          <p class="icon-text">file-plus-shape</p>
        </li>
        <li class="icon-item" title="file-plus">
          <span class="icon paasng-icon paasng-file-plus"></span>
          <p class="icon-text">file-plus</p>
        </li>
        <li class="icon-item" title="file-shape">
          <span class="icon paasng-icon paasng-file-shape"></span>
          <p class="icon-text">file-shape</p>
        </li>
        <li class="icon-item" title="file">
          <span class="icon paasng-icon paasng-file"></span>
          <p class="icon-text">file</p>
        </li>
        <li class="icon-item" title="folder-open-shape">
          <span class="icon paasng-icon paasng-folder-open-shape"></span>
          <p class="icon-text">folder-open-shape</p>
        </li>
        <li class="icon-item" title="folder-open">
          <span class="icon paasng-icon paasng-folder-open"></span>
          <p class="icon-text">folder-open</p>
        </li>
        <li class="icon-item" title="folder-plus-shape">
          <span class="icon paasng-icon paasng-folder-plus-shape"></span>
          <p class="icon-text">folder-plus-shape</p>
        </li>
        <li class="icon-item" title="folder-plus">
          <span class="icon paasng-icon paasng-folder-plus"></span>
          <p class="icon-text">folder-plus</p>
        </li>
        <li class="icon-item" title="folder-shape">
          <span class="icon paasng-icon paasng-folder-shape"></span>
          <p class="icon-text">folder-shape</p>
        </li>
        <li class="icon-item" title="folder">
          <span class="icon paasng-icon paasng-folder"></span>
          <p class="icon-text">folder</p>
        </li>
        <li class="icon-item" title="full-screen">
          <span class="icon paasng-icon paasng-full-screen"></span>
          <p class="icon-text">full-screen</p>
        </li>
        <li class="icon-item" title="heart-shape">
          <span class="icon paasng-icon paasng-heart-shape"></span>
          <p class="icon-text">heart-shape</p>
        </li>
        <li class="icon-item" title="heart">
          <span class="icon paasng-icon paasng-heart"></span>
          <p class="icon-text">heart</p>
        </li>
        <li class="icon-item" title="hide">
          <span class="icon paasng-icon paasng-hide"></span>
          <p class="icon-text">hide</p>
        </li>
        <li class="icon-item" title="home">
          <span class="icon paasng-icon paasng-home"></span>
          <p class="icon-text">home</p>
        </li>
        <li class="icon-item" title="id-shape">
          <span class="icon paasng-icon paasng-id-shape"></span>
          <p class="icon-text">id-shape</p>
        </li>
        <li class="icon-item" title="id">
          <span class="icon paasng-icon paasng-id"></span>
          <p class="icon-text">id</p>
        </li>
        <li class="icon-item" title="image-shape">
          <span class="icon paasng-icon paasng-image-shape"></span>
          <p class="icon-text">image-shape</p>
        </li>
        <li class="icon-item" title="image">
          <span class="icon paasng-icon paasng-image"></span>
          <p class="icon-text">image</p>
        </li>
        <li class="icon-item" title="indent">
          <span class="icon paasng-icon paasng-indent"></span>
          <p class="icon-text">indent</p>
        </li>
        <li class="icon-item" title="info-circle-shape">
          <span class="icon paasng-icon paasng-info-circle-shape"></span>
          <p class="icon-text">info-circle-shape</p>
        </li>
        <li class="icon-item" title="info-circle">
          <span class="icon paasng-icon paasng-info-circle"></span>
          <p class="icon-text">info-circle</p>
        </li>
        <li class="icon-item" title="info-2">
          <span class="icon paasng-icon paasng-info-2"></span>
          <p class="icon-text">info-2</p>
        </li>
        <li class="icon-item" title="key-2">
          <span class="icon paasng-icon paasng-key-2"></span>
          <p class="icon-text">key-2</p>
        </li>
        <li class="icon-item" title="left-shape">
          <span class="icon paasng-icon paasng-left-shape"></span>
          <p class="icon-text">left-shape</p>
        </li>
        <li class="icon-item" title="line-chart">
          <span class="icon paasng-icon paasng-line-chart"></span>
          <p class="icon-text">line-chart</p>
        </li>
        <li class="icon-item" title="list">
          <span class="icon paasng-icon paasng-list"></span>
          <p class="icon-text">list</p>
        </li>
        <li class="icon-item" title="lock-shape">
          <span class="icon paasng-icon paasng-lock-shape"></span>
          <p class="icon-text">lock-shape</p>
        </li>
        <li class="icon-item" title="lock">
          <span class="icon paasng-icon paasng-lock"></span>
          <p class="icon-text">lock</p>
        </li>
        <li class="icon-item" title="minus-circle-shape">
          <span class="icon paasng-icon paasng-minus-circle-shape"></span>
          <p class="icon-text">minus-circle-shape</p>
        </li>
        <li class="icon-item" title="minus-circle">
          <span class="icon paasng-icon paasng-minus-circle"></span>
          <p class="icon-text">minus-circle</p>
        </li>
        <li class="icon-item" title="minus-square-shape">
          <span class="icon paasng-icon paasng-minus-square-shape"></span>
          <p class="icon-text">minus-square-shape</p>
        </li>
        <li class="icon-item" title="minus-square">
          <span class="icon paasng-icon paasng-minus-square"></span>
          <p class="icon-text">minus-square</p>
        </li>
        <li class="icon-item" title="minus">
          <span class="icon paasng-icon paasng-minus"></span>
          <p class="icon-text">minus</p>
        </li>
        <li class="icon-item" title="mobile-shape">
          <span class="icon paasng-icon paasng-mobile-shape"></span>
          <p class="icon-text">mobile-shape</p>
        </li>
        <li class="icon-item" title="mobile">
          <span class="icon paasng-icon paasng-mobile"></span>
          <p class="icon-text">mobile</p>
        </li>
        <li class="icon-item" title="monitors-cog">
          <span class="icon paasng-icon paasng-monitors-cog"></span>
          <p class="icon-text">monitors-cog</p>
        </li>
        <li class="icon-item" title="more">
          <span class="icon paasng-icon paasng-more"></span>
          <p class="icon-text">more</p>
        </li>
        <li class="icon-item" title="move">
          <span class="icon paasng-icon paasng-move"></span>
          <p class="icon-text">move</p>
        </li>
        <li class="icon-item" title="next-shape">
          <span class="icon paasng-icon paasng-next-shape"></span>
          <p class="icon-text">next-shape</p>
        </li>
        <li class="icon-item" title="monitors">
          <span class="icon paasng-icon paasng-monitors"></span>
          <p class="icon-text">monitors</p>
        </li>
        <li class="icon-item" title="next">
          <span class="icon paasng-icon paasng-next"></span>
          <p class="icon-text">next</p>
        </li>
        <li class="icon-item" title="order-shape">
          <span class="icon paasng-icon paasng-order-shape"></span>
          <p class="icon-text">order-shape</p>
        </li>
        <li class="icon-item" title="order">
          <span class="icon paasng-icon paasng-order"></span>
          <p class="icon-text">order</p>
        </li>
        <li class="icon-item" title="panel-shape">
          <span class="icon paasng-icon paasng-panel-shape"></span>
          <p class="icon-text">panel-shape</p>
        </li>
        <li class="icon-item" title="panel-permission">
          <span class="icon paasng-icon paasng-panel-permission"></span>
          <p class="icon-text">panel-permission</p>
        </li>
        <li class="icon-item" title="panel">
          <span class="icon paasng-icon paasng-panel"></span>
          <p class="icon-text">panel</p>
        </li>
        <li class="icon-item" title="panels">
          <span class="icon paasng-icon paasng-panels"></span>
          <p class="icon-text">panels</p>
        </li>
        <li class="icon-item" title="password-shape">
          <span class="icon paasng-icon paasng-password-shape"></span>
          <p class="icon-text">password-shape</p>
        </li>
        <li class="icon-item" title="password">
          <span class="icon paasng-icon paasng-password"></span>
          <p class="icon-text">password</p>
        </li>
        <li class="icon-item" title="pc-shape">
          <span class="icon paasng-icon paasng-pc-shape"></span>
          <p class="icon-text">pc-shape</p>
        </li>
        <li class="icon-item" title="pause">
          <span class="icon paasng-icon paasng-pause"></span>
          <p class="icon-text">pause</p>
        </li>
        <li class="icon-item" title="pc">
          <span class="icon paasng-icon paasng-pc"></span>
          <p class="icon-text">pc</p>
        </li>
        <li class="icon-item" title="pie-chart-shape">
          <span class="icon paasng-icon paasng-pie-chart-shape"></span>
          <p class="icon-text">pie-chart-shape</p>
        </li>
        <li class="icon-item" title="pie-chart">
          <span class="icon paasng-icon paasng-pie-chart"></span>
          <p class="icon-text">pie-chart</p>
        </li>
        <li class="icon-item" title="pipeline-shape">
          <span class="icon paasng-icon paasng-pipeline-shape"></span>
          <p class="icon-text">pipeline-shape</p>
        </li>
        <li class="icon-item" title="pipeline">
          <span class="icon paasng-icon paasng-pipeline"></span>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="icon-item" title="play-shape">
          <span class="icon paasng-icon paasng-play-shape"></span>
          <p class="icon-text">play-shape</p>
        </li>
        <li class="icon-item" title="play-circle-shape">
          <span class="icon paasng-icon paasng-play-circle-shape"></span>
          <p class="icon-text">play-circle-shape</p>
        </li>
        <li class="icon-item" title="play">
          <span class="icon paasng-icon paasng-play"></span>
          <p class="icon-text">play</p>
        </li>
        <li class="icon-item" title="play2">
          <span class="icon paasng-icon paasng-play2"></span>
          <p class="icon-text">play2</p>
        </li>
        <li class="icon-item" title="play3">
          <span class="icon paasng-icon paasng-play3"></span>
          <p class="icon-text">play3</p>
        </li>
        <li class="icon-item" title="plus-circle-shape">
          <span class="icon paasng-icon paasng-plus-circle-shape"></span>
          <p class="icon-text">plus-circle-shape</p>
        </li>
        <li class="icon-item" title="plus-circle">
          <span class="icon paasng-icon paasng-plus-circle"></span>
          <p class="icon-text">plus-circle</p>
        </li>
        <li class="icon-item" title="plus-square-shape">
          <span class="icon paasng-icon paasng-plus-square-shape"></span>
          <p class="icon-text">plus-square-shape</p>
        </li>
        <li class="icon-item" title="plus-square">
          <span class="icon paasng-icon paasng-plus-square"></span>
          <p class="icon-text">plus-square</p>
        </li>
        <li class="icon-item" title="plus">
          <span class="icon paasng-icon paasng-plus"></span>
          <p class="icon-text">plus</p>
        </li>
        <li class="icon-item" title="project">
          <span class="icon paasng-icon paasng-project"></span>
          <p class="icon-text">project</p>
        </li>
        <li class="icon-item" title="qq-shape">
          <span class="icon paasng-icon paasng-qq-shape"></span>
          <p class="icon-text">qq-shape</p>
        </li>
        <li class="icon-item" title="qq">
          <span class="icon paasng-icon paasng-qq"></span>
          <p class="icon-text">qq</p>
        </li>
        <li class="icon-item" title="question-circle-shape">
          <span class="icon paasng-icon paasng-question-circle-shape"></span>
          <p class="icon-text">question-circle-shape</p>
        </li>
        <li class="icon-item" title="question-circle">
          <span class="icon paasng-icon paasng-question-circle"></span>
          <p class="icon-text">question-circle</p>
        </li>
        <li class="icon-item" title="question">
          <span class="icon paasng-icon paasng-question"></span>
          <p class="icon-text">question</p>
        </li>
        <li class="icon-item" title="refresh">
          <span class="icon paasng-icon paasng-refresh"></span>
          <p class="icon-text">refresh</p>
        </li>
        <li class="icon-item" title="right-shape">
          <span class="icon paasng-icon paasng-right-shape"></span>
          <p class="icon-text">right-shape</p>
        </li>
        <li class="icon-item" title="save-shape">
          <span class="icon paasng-icon paasng-save-shape"></span>
          <p class="icon-text">save-shape</p>
        </li>
        <li class="icon-item" title="save">
          <span class="icon paasng-icon paasng-save"></span>
          <p class="icon-text">save</p>
        </li>
        <li class="icon-item" title="script-file">
          <span class="icon paasng-icon paasng-script-file"></span>
          <p class="icon-text">script-file</p>
        </li>
        <li class="icon-item" title="script-files">
          <span class="icon paasng-icon paasng-script-files"></span>
          <p class="icon-text">script-files</p>
        </li>
        <li class="icon-item" title="search">
          <span class="icon paasng-icon paasng-search"></span>
          <p class="icon-text">search</p>
        </li>
        <li class="icon-item" title="sina">
          <span class="icon paasng-icon paasng-sina"></span>
          <p class="icon-text">sina</p>
        </li>
        <li class="icon-item" title="sitemap-shape">
          <span class="icon paasng-icon paasng-sitemap-shape"></span>
          <p class="icon-text">sitemap-shape</p>
        </li>
        <li class="icon-item" title="sitemap">
          <span class="icon paasng-icon paasng-sitemap"></span>
          <p class="icon-text">sitemap</p>
        </li>
        <li class="icon-item" title="smile-shape">
          <span class="icon paasng-icon paasng-smile-shape"></span>
          <p class="icon-text">smile-shape</p>
        </li>
        <li class="icon-item" title="smile">
          <span class="icon paasng-icon paasng-smile"></span>
          <p class="icon-text">smile</p>
        </li>
        <li class="icon-item" title="sort">
          <span class="icon paasng-icon paasng-sort"></span>
          <p class="icon-text">sort</p>
        </li>
        <li class="icon-item" title="star-3">
          <span class="icon paasng-icon paasng-star-3"></span>
          <p class="icon-text">star-3</p>
        </li>
        <li class="icon-item" title="star-shape">
          <span class="icon paasng-icon paasng-star-shape"></span>
          <p class="icon-text">star-shape</p>
        </li>
        <li class="icon-item" title="stop-shape">
          <span class="icon paasng-icon paasng-stop-shape"></span>
          <p class="icon-text">stop-shape</p>
        </li>
        <li class="icon-item" title="stop">
          <span class="icon paasng-icon paasng-stop"></span>
          <p class="icon-text">stop</p>
        </li>
        <li class="icon-item" title="tree-application-shape">
          <span class="icon paasng-icon paasng-tree-application-shape"></span>
          <p class="icon-text">tree-application-shape</p>
        </li>
        <li class="icon-item" title="tree-application">
          <span class="icon paasng-icon paasng-tree-application"></span>
          <p class="icon-text">tree-application</p>
        </li>
        <li class="icon-item" title="tree-group-shape">
          <span class="icon paasng-icon paasng-tree-group-shape"></span>
          <p class="icon-text">tree-group-shape</p>
        </li>
        <li class="icon-item" title="tree-group">
          <span class="icon paasng-icon paasng-tree-group"></span>
          <p class="icon-text">tree-group</p>
        </li>
        <li class="icon-item" title="tree-module-shape">
          <span class="icon paasng-icon paasng-tree-module-shape"></span>
          <p class="icon-text">tree-module-shape</p>
        </li>
        <li class="icon-item" title="tree-module">
          <span class="icon paasng-icon paasng-tree-module"></span>
          <p class="icon-text">tree-module</p>
        </li>
        <li class="icon-item" title="tree-process-shape">
          <span class="icon paasng-icon paasng-tree-process-shape"></span>
          <p class="icon-text">tree-process-shape</p>
        </li>
        <li class="icon-item" title="tree-process">
          <span class="icon paasng-icon paasng-tree-process"></span>
          <p class="icon-text">tree-process</p>
        </li>
        <li class="icon-item" title="unlock-shape">
          <span class="icon paasng-icon paasng-unlock-shape"></span>
          <p class="icon-text">unlock-shape</p>
        </li>
        <li class="icon-item" title="un-full-screen">
          <span class="icon paasng-icon paasng-un-full-screen"></span>
          <p class="icon-text">un-full-screen</p>
        </li>
        <li class="icon-item" title="unlock">
          <span class="icon paasng-icon paasng-unlock"></span>
          <p class="icon-text">unlock</p>
        </li>
        <li class="icon-item" title="up-shape">
          <span class="icon paasng-icon paasng-up-shape"></span>
          <p class="icon-text">up-shape</p>
        </li>
        <li class="icon-item" title="user-shape">
          <span class="icon paasng-icon paasng-user-shape"></span>
          <p class="icon-text">user-shape</p>
        </li>
        <li class="icon-item" title="upload">
          <span class="icon paasng-icon paasng-upload"></span>
          <p class="icon-text">upload</p>
        </li>
        <li class="icon-item" title="user">
          <span class="icon paasng-icon paasng-user"></span>
          <p class="icon-text">user</p>
        </li>
        <li class="icon-item" title="weixin-shape">
          <span class="icon paasng-icon paasng-weixin-shape"></span>
          <p class="icon-text">weixin-shape</p>
        </li>
        <li class="icon-item" title="weixin">
          <span class="icon paasng-icon paasng-weixin"></span>
          <p class="icon-text">weixin</p>
        </li>
        <li class="icon-item" title="work-manage">
          <span class="icon paasng-icon paasng-work-manage"></span>
          <p class="icon-text">work-manage</p>
        </li>
        <li class="icon-item" title="star-cover">
          <span class="icon paasng-icon paasng-star-cover"></span>
          <p class="icon-text">star-cover</p>
        </li>
        <li class="icon-item" title="offline">
          <span class="icon paasng-icon paasng-offline"></span>
          <p class="icon-text">offline</p>
        </li>
        <li class="icon-item" title="excel-fill">
          <span class="icon paasng-icon paasng-excel-fill"></span>
          <p class="icon-text">excel-fill</p>
        </li>
        <li class="icon-item" title="file-fill">
          <span class="icon paasng-icon paasng-file-fill"></span>
          <p class="icon-text">file-fill</p>
        </li>
        <li class="icon-item" title="deploy-preparation">
          <span class="icon paasng-icon paasng-deploy-preparation"></span>
          <p class="icon-text">deploy-preparation</p>
        </li>
        <li class="icon-item" title="deploy-build">
          <span class="icon paasng-icon paasng-deploy-build"></span>
          <p class="icon-text">deploy-build</p>
        </li>
        <li class="icon-item" title="deploy-release">
          <span class="icon paasng-icon paasng-deploy-release"></span>
          <p class="icon-text">deploy-release</p>
        </li>
        <li class="icon-item" title="restore-screen">
          <span class="icon paasng-icon paasng-restore-screen"></span>
          <p class="icon-text">restore-screen</p>
        </li>
        <li class="icon-item" title="full-screen-new">
          <span class="icon paasng-icon paasng-full-screen-new"></span>
          <p class="icon-text">full-screen-new</p>
        </li>
        <li class="icon-item" title="git-code">
          <span class="icon paasng-icon paasng-git-code"></span>
          <p class="icon-text">git-code</p>
        </li>
        <li class="icon-item" title="go">
          <span class="icon paasng-icon paasng-go"></span>
          <p class="icon-text">go</p>
        </li>
        <li class="icon-item" title="golang">
          <span class="icon paasng-icon paasng-golang"></span>
          <p class="icon-text">golang</p>
        </li>
        <li class="icon-item" title="nodejs">
          <span class="icon paasng-icon paasng-nodejs"></span>
          <p class="icon-text">nodejs</p>
        </li>
        <li class="icon-item" title="python">
          <span class="icon paasng-icon paasng-python"></span>
          <p class="icon-text">python</p>
        </li>
        <li class="icon-item" title="svn">
          <span class="icon paasng-icon paasng-svn"></span>
          <p class="icon-text">svn</p>
        </li>
        <li class="icon-item" title="gitlab-2">
          <span class="icon paasng-icon paasng-gitlab-2"></span>
          <p class="icon-text">gitlab-2</p>
        </li>
        <li class="icon-item" title="nodejs-2">
          <span class="icon paasng-icon paasng-nodejs-2"></span>
          <p class="icon-text">nodejs-2</p>
        </li>
        <li class="icon-item" title="diff-2">
          <span class="icon paasng-icon paasng-diff-2"></span>
          <p class="icon-text">diff-2</p>
        </li>
        <li class="icon-item" title="lesscode">
          <span class="icon paasng-icon paasng-lesscode"></span>
          <p class="icon-text">lesscode</p>
        </li>
        <li class="icon-item" title="upload-2">
          <span class="icon paasng-icon paasng-upload-2"></span>
          <p class="icon-text">upload-2</p>
        </li>
        <li class="icon-item" title="git">
          <span class="icon paasng-icon paasng-git"></span>
          <p class="icon-text">git</p>
        </li>
        <li class="icon-item" title="page-fill">
          <span class="icon paasng-icon paasng-page-fill"></span>
          <p class="icon-text">page-fill</p>
        </li>
        <li class="icon-item" title="organization">
          <span class="icon paasng-icon paasng-organization"></span>
          <p class="icon-text">organization</p>
        </li>
        <li class="icon-item" title="cloudapi">
          <span class="icon paasng-icon paasng-cloudapi"></span>
          <p class="icon-text">cloudapi</p>
        </li>
        <li class="icon-item" title="insights">
          <span class="icon paasng-icon paasng-insights"></span>
          <p class="icon-text">insights</p>
        </li>
        <li class="icon-item" title="bold-close">
          <span class="icon paasng-icon paasng-bold-close"></span>
          <p class="icon-text">bold-close</p>
        </li>
        <li class="icon-item" title="time">
          <span class="icon paasng-icon paasng-time"></span>
          <p class="icon-text">time</p>
        </li>
        <li class="icon-item" title="project">
          <span class="icon paasng-icon paasng-project"></span>
          <p class="icon-text">project</p>
        </li>
        <li class="icon-item" title="angle-double-down">
          <span class="icon paasng-icon paasng-angle-double-down"></span>
          <p class="icon-text">angle-double-down</p>
        </li>
        <li class="icon-item" title="angle-double-up">
          <span class="icon paasng-icon paasng-angle-double-up"></span>
          <p class="icon-text">angle-double-up</p>
        </li>
        <li class="icon-item" title="angle-line-down">
          <span class="icon paasng-icon paasng-angle-line-down"></span>
          <p class="icon-text">angle-line-down</p>
        </li>
        <li class="icon-item" title="angle-line-up">
          <span class="icon paasng-icon paasng-angle-line-up"></span>
          <p class="icon-text">angle-line-up</p>
        </li>
        <li class="icon-item" title="overview">
          <span class="icon paasng-icon paasng-overview"></span>
          <p class="icon-text">overview</p>
        </li>
        <li class="icon-item" title="setting-2">
          <span class="icon paasng-icon paasng-setting-2"></span>
          <p class="icon-text">setting-2</p>
        </li>
        <li class="icon-item" title="publish-fill">
          <span class="icon paasng-icon paasng-publish-fill"></span>
          <p class="icon-text">publish-fill</p>
        </li>
        <li class="icon-item" title="log-2">
          <span class="icon paasng-icon paasng-log-2"></span>
          <p class="icon-text">log-2</p>
        </li>
        <li class="icon-item" title="alert">
          <span class="icon paasng-icon paasng-alert"></span>
          <p class="icon-text">alert</p>
        </li>
        <li class="icon-item" title="alert2">
          <span class="icon paasng-icon paasng-alert2"></span>
          <p class="icon-text">alert2</p>
        </li>
        <li class="icon-item" title="member">
          <span class="icon paasng-icon paasng-member"></span>
          <p class="icon-text">member</p>
        </li>
        <li class="icon-item" title="version">
          <span class="icon paasng-icon paasng-version"></span>
          <p class="icon-text">version</p>
        </li>
        <li class="icon-item" title="help-2">
          <span class="icon paasng-icon paasng-help-2"></span>
          <p class="icon-text">help-2</p>
        </li>
        <li class="icon-item" title="plus-circle">
          <span class="icon paasng-icon paasng-plus-circle"></span>
          <p class="icon-text">plus-circle</p>
        </li>
        <li class="icon-item" title="back">
          <span class="icon paasng-icon paasng-back"></span>
          <p class="icon-text">back</p>
        </li>
        <li class="icon-item" title="ceshi">
          <span class="icon paasng-icon paasng-ceshi"></span>
          <p class="icon-text">ceshi</p>
        </li>
        <li class="icon-item" title="zhengshi">
          <span class="icon paasng-icon paasng-zhengshi"></span>
          <p class="icon-text">zhengshi</p>
        </li>
        <li class="icon-item" title="diff">
          <span class="icon paasng-icon paasng-diff"></span>
          <p class="icon-text">diff</p>
        </li>
        <li class="icon-item" title="debug">
          <span class="icon paasng-icon paasng-debug"></span>
          <p class="icon-text">debug</p>
        </li>
        <li class="icon-item" title="stop">
          <span class="icon paasng-icon paasng-stop"></span>
          <p class="icon-text">stop</p>
        </li>
        <li class="icon-item" title="refresh-line">
          <span class="icon paasng-icon paasng-refresh-line"></span>
          <p class="icon-text">refresh-line</p>
        </li>
        <li class="icon-item" title="download">
          <span class="icon paasng-icon paasng-download"></span>
          <p class="icon-text">download</p>
        </li>
        <li class="icon-item" title="stop-2">
          <span class="icon paasng-icon paasng-stop-2"></span>
          <p class="icon-text">stop-2</p>
        </li>
        <li class="icon-item" title="organization">
          <span class="icon paasng-icon paasng-organization"></span>
          <p class="icon-text">organization</p>
        </li>
        <li class="icon-item" title="user">
          <span class="icon paasng-icon paasng-user"></span>
          <p class="icon-text">user</p>
        </li>
        <li class="icon-item" title="user2">
          <span class="icon paasng-icon paasng-user2"></span>
          <p class="icon-text">user2</p>
        </li>
        <li class="icon-item" title="file">
          <span class="icon paasng-icon paasng-file"></span>
          <p class="icon-text">file</p>
        </li>
        <li class="icon-item" title="process">
          <span class="icon paasng-icon paasng-process"></span>
          <p class="icon-text">process</p>
        </li>
        <li class="icon-item" title="configuration">
          <span class="icon paasng-icon paasng-configuration"></span>
          <p class="icon-text">configuration</p>
        </li>
        <li class="icon-item" title="api">
          <span class="icon paasng-icon paasng-api"></span>
          <p class="icon-text">api</p>
        </li>
        <li class="icon-item" title="wangguan">
          <span class="icon paasng-icon paasng-wangguan"></span>
          <p class="icon-text">wangguan</p>
        </li>
        <li class="icon-item" title="api-2">
          <span class="icon paasng-icon paasng-api-2"></span>
          <p class="icon-text">api-2</p>
        </li>
        <li class="icon-item" title="pv">
          <span class="icon paasng-icon paasng-pv"></span>
          <p class="icon-text">pv</p>
        </li>
        <li class="icon-item" title="process-2">
          <span class="icon paasng-icon paasng-process-2"></span>
          <p class="icon-text">process-2</p>
        </li>
        <li class="icon-item" title="abnormal">
          <span class="icon paasng-icon paasng-abnormal"></span>
          <p class="icon-text">abnormal</p>
        </li>
        <li class="icon-item" title="normal">
          <span class="icon paasng-icon paasng-normal"></span>
          <p class="icon-text">normal</p>
        </li>
        <li class="icon-item" title="default">
          <span class="icon paasng-icon paasng-default"></span>
          <p class="icon-text">default</p>
        </li>
        <li class="icon-item" title="success">
          <span class="icon paasng-icon paasng-success"></span>
          <p class="icon-text">success</p>
        </li>
        <li class="icon-item" title="failed">
          <span class="icon paasng-icon paasng-failed"></span>
          <p class="icon-text">failed</p>
        </li>
        <li class="icon-item" title="waiting">
          <span class="icon paasng-icon paasng-waiting"></span>
          <p class="icon-text">waiting</p>
        </li>
        <li class="icon-item" title="warning-2">
          <span class="icon paasng-icon paasng-warning-2"></span>
          <p class="icon-text">warning-2</p>
        </li>
        <li class="icon-item" title="unknown">
          <span class="icon paasng-icon paasng-unknown"></span>
          <p class="icon-text">unknown</p>
        </li>
        <li class="icon-item" title="lishijilu">
          <span class="icon paasng-icon paasng-lishijilu"></span>
          <p class="icon-text">lishijilu</p>
        </li>
        <li class="icon-item" title="bushu">
          <span class="icon paasng-icon paasng-bushu"></span>
          <p class="icon-text">bushu</p>
        </li>
        <li class="icon-item" title="keguance">
          <span class="icon paasng-icon paasng-keguance"></span>
          <p class="icon-text">keguance</p>
        </li>
        <li class="icon-item" title="peizhi">
          <span class="icon paasng-icon paasng-peizhi"></span>
          <p class="icon-text">peizhi</p>
        </li>
        <li class="icon-item" title="jingxiang">
          <span class="icon paasng-icon paasng-jingxiang"></span>
          <p class="icon-text">jingxiang</p>
        </li>
        <li class="icon-item" title="guifan">
          <span class="icon paasng-icon paasng-guifan"></span>
          <p class="icon-text">guifan</p>
        </li>
        <li class="icon-item" title="anquan">
          <span class="icon paasng-icon paasng-anquan"></span>
          <p class="icon-text">anquan</p>
        </li>
        <li class="icon-item" title="duliang">
          <span class="icon paasng-icon paasng-duliang"></span>
          <p class="icon-text">duliang</p>
        </li>
        <li class="icon-item" title="deploy-item-dot">
          <span class="icon paasng-icon paasng-deploy-item-dot"></span>
          <p class="icon-text">deploy-item-dot</p>
        </li>
        <li class="icon-item" title="shouqi">
          <span class="icon paasng-icon paasng-shouqi"></span>
          <p class="icon-text">shouqi</p>
        </li>
        <li class="icon-item" title="zhankai">
          <span class="icon paasng-icon paasng-zhankai"></span>
          <p class="icon-text">zhankai</p>
        </li>
        <li class="icon-item" title="tableminus">
          <span class="icon paasng-icon paasng-tableminus"></span>
          <p class="icon-text">tableminus</p>
        </li>
        <li class="icon-item" title="tableplus">
          <span class="icon paasng-icon paasng-tableplus"></span>
          <p class="icon-text">tableplus</p>
        </li>
        <li class="icon-item" title="gitlab-3">
          <span class="icon paasng-icon paasng-gitlab-3"></span>
          <p class="icon-text">gitlab-3</p>
        </li>
        <li class="icon-item" title="jiangxu">
          <span class="icon paasng-icon paasng-jiangxu"></span>
          <p class="icon-text">jiangxu</p>
        </li>
        <li class="icon-item" title="shengxu">
          <span class="icon paasng-icon paasng-shengxu"></span>
          <p class="icon-text">shengxu</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
        <li>弹性，在网页或者 app 上，展示字体是很便捷的。用字体图标可以很方便的改变 icon 的颜色，或者加入一些其他的效果</li>
        <li>可缩放，可以很方便的改变图标的大小</li>
        <li>矢量，字体图标是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊</li>
        <li>节省加载时间，字体图标很小，每个小图标只有几 kb，大大节省了加载时间</li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将整个目录复制到您的项目里</li>
        <li>引入 style.css</li>
        <li>挑选相应图标并获取类名，如 .bk-icon .icon-demo</li>
      </ul>
    </section>
    <section class="tab-content multiple-color"  data-type="multipleColor">
      <ul class="icon-list">
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-feature-conversion"></use>
          </svg>
          <p class="icon-text">feature-conversion</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-link"></use>
          </svg>
          <p class="icon-text">link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-remind"></use>
          </svg>
          <p class="icon-text">remind</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stop-fill"></use>
          </svg>
          <p class="icon-text">stop-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-line"></use>
          </svg>
          <p class="icon-text">info-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-fill"></use>
          </svg>
          <p class="icon-text">info-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-return-small"></use>
          </svg>
          <p class="icon-text">return-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-edit-2"></use>
          </svg>
          <p class="icon-text">edit-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-process-file"></use>
          </svg>
          <p class="icon-text">process-file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-bukeyulan"></use>
          </svg>
          <p class="icon-text">bukeyulan</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-github-logo"></use>
          </svg>
          <p class="icon-text">github-logo</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-check-small"></use>
          </svg>
          <p class="icon-text">check-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-template-fill"></use>
          </svg>
          <p class="icon-text">template-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-list-fill"></use>
          </svg>
          <p class="icon-text">list-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-debug-fill"></use>
          </svg>
          <p class="icon-text">debug-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-configuration-line"></use>
          </svg>
          <p class="icon-text">configuration-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-diff-line"></use>
          </svg>
          <p class="icon-text">diff-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-correct"></use>
          </svg>
          <p class="icon-text">correct</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-branch-line"></use>
          </svg>
          <p class="icon-text">branch-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-analysis"></use>
          </svg>
          <p class="icon-text">analysis</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dashboard"></use>
          </svg>
          <p class="icon-text">dashboard</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-diamond"></use>
          </svg>
          <p class="icon-text">diamond</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-chip"></use>
          </svg>
          <p class="icon-text">chip</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-current-source-type"></use>
          </svg>
          <p class="icon-text">current-source-type</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-double-arrow-right"></use>
          </svg>
          <p class="icon-text">double-arrow-right</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-external-link"></use>
          </svg>
          <p class="icon-text">external-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-funnel"></use>
          </svg>
          <p class="icon-text">funnel</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-gear"></use>
          </svg>
          <p class="icon-text">gear</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dynamic-line"></use>
          </svg>
          <p class="icon-text">dynamic-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-general-copy"></use>
          </svg>
          <p class="icon-text">general-copy</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-general-sort"></use>
          </svg>
          <p class="icon-text">general-sort</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-gitlab"></use>
          </svg>
          <p class="icon-text">gitlab</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-help"></use>
          </svg>
          <p class="icon-text">help</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-icon-close"></use>
          </svg>
          <p class="icon-text">icon-close</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-icon-more"></use>
          </svg>
          <p class="icon-text">icon-more</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-icon-search"></use>
          </svg>
          <p class="icon-text">icon-search</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-danger"></use>
          </svg>
          <p class="icon-text">info-danger</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-jump-link"></use>
          </svg>
          <p class="icon-text">jump-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-keys"></use>
          </svg>
          <p class="icon-text">keys</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-logo"></use>
          </svg>
          <p class="icon-text">logo</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-market-line"></use>
          </svg>
          <p class="icon-text">market-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-metrics"></use>
          </svg>
          <p class="icon-text">metrics</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-modules"></use>
          </svg>
          <p class="icon-text">modules</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-monitor-fill"></use>
          </svg>
          <p class="icon-text">monitor-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-monitor"></use>
          </svg>
          <p class="icon-text">monitor</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pa-arrow-left"></use>
          </svg>
          <p class="icon-text">pa-arrow-left</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-paas-remind-fill"></use>
          </svg>
          <p class="icon-text">paas-remind-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pack-up"></use>
          </svg>
          <p class="icon-text">pack-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pass"></use>
          </svg>
          <p class="icon-text">pass</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-thick"></use>
          </svg>
          <p class="icon-text">plus-thick</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-ps-arrow-down"></use>
          </svg>
          <p class="icon-text">ps-arrow-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-ps-arrow-right"></use>
          </svg>
          <p class="icon-text">ps-arrow-right</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-ps-arrow-up"></use>
          </svg>
          <p class="icon-text">ps-arrow-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-reject"></use>
          </svg>
          <p class="icon-text">reject</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-security"></use>
          </svg>
          <p class="icon-text">security</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-squares"></use>
          </svg>
          <p class="icon-text">squares</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-star-line"></use>
          </svg>
          <p class="icon-text">star-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stick"></use>
          </svg>
          <p class="icon-text">stick</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-unfold"></use>
          </svg>
          <p class="icon-text">unfold</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-volumn"></use>
          </svg>
          <p class="icon-text">volumn</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-window-source-code"></use>
          </svg>
          <p class="icon-text">window-source-code</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-down"></use>
          </svg>
          <p class="icon-text">angle-double-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-left"></use>
          </svg>
          <p class="icon-text">angle-double-left</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-down"></use>
          </svg>
          <p class="icon-text">angle-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-right"></use>
          </svg>
          <p class="icon-text">angle-double-right</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-left"></use>
          </svg>
          <p class="icon-text">angle-left</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-up"></use>
          </svg>
          <p class="icon-text">angle-double-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-up"></use>
          </svg>
          <p class="icon-text">angle-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-apps-shape"></use>
          </svg>
          <p class="icon-text">apps-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-apps"></use>
          </svg>
          <p class="icon-text">apps</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-right"></use>
          </svg>
          <p class="icon-text">angle-right</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-area-chart"></use>
          </svg>
          <p class="icon-text">area-chart</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-down-circle"></use>
          </svg>
          <p class="icon-text">arrows-down-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-down-shape"></use>
          </svg>
          <p class="icon-text">arrows-down-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-down"></use>
          </svg>
          <p class="icon-text">arrows-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-left-circle"></use>
          </svg>
          <p class="icon-text">arrows-left-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-left"></use>
          </svg>
          <p class="icon-text">arrows-left</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-right-circle"></use>
          </svg>
          <p class="icon-text">arrows-right-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-right"></use>
          </svg>
          <p class="icon-text">arrows-right</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-up-circle"></use>
          </svg>
          <p class="icon-text">arrows-up-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-arrows-up"></use>
          </svg>
          <p class="icon-text">arrows-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-back-shape"></use>
          </svg>
          <p class="icon-text">back-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-back"></use>
          </svg>
          <p class="icon-text">back</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-back2"></use>
          </svg>
          <p class="icon-text">back2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-bar-chart"></use>
          </svg>
          <p class="icon-text">bar-chart</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-bk"></use>
          </svg>
          <p class="icon-text">bk</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-block-shape"></use>
          </svg>
          <p class="icon-text">block-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-calendar-shape"></use>
          </svg>
          <p class="icon-text">calendar-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-calendar"></use>
          </svg>
          <p class="icon-text">calendar</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-chain"></use>
          </svg>
          <p class="icon-text">chain</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-check-1"></use>
          </svg>
          <p class="icon-text">check-1</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-check-circle-shape"></use>
          </svg>
          <p class="icon-text">check-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-check-circle"></use>
          </svg>
          <p class="icon-text">check-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-circle-2-1"></use>
          </svg>
          <p class="icon-text">circle-2-1</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-circle-4-1"></use>
          </svg>
          <p class="icon-text">circle-4-1</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-circle-shape"></use>
          </svg>
          <p class="icon-text">circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-circle"></use>
          </svg>
          <p class="icon-text">circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-clipboard-shape"></use>
          </svg>
          <p class="icon-text">clipboard-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-clipboard"></use>
          </svg>
          <p class="icon-text">clipboard</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-clock-shape"></use>
          </svg>
          <p class="icon-text">clock-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-clock"></use>
          </svg>
          <p class="icon-text">clock</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-close-circle-shape"></use>
          </svg>
          <p class="icon-text">close-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-close-circle"></use>
          </svg>
          <p class="icon-text">close-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-close"></use>
          </svg>
          <p class="icon-text">close</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-close3-shape"></use>
          </svg>
          <p class="icon-text">close3-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-code"></use>
          </svg>
          <p class="icon-text">code</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-cog-shape"></use>
          </svg>
          <p class="icon-text">cog-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-cog"></use>
          </svg>
          <p class="icon-text">cog</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-cry"></use>
          </svg>
          <p class="icon-text">cry</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dashboard-2-shape"></use>
          </svg>
          <p class="icon-text">dashboard-2-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dashboard-2"></use>
          </svg>
          <p class="icon-text">dashboard-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dashboard-shape"></use>
          </svg>
          <p class="icon-text">dashboard-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dashboard-2"></use>
          </svg>
          <p class="icon-text">dashboard-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-data-shape"></use>
          </svg>
          <p class="icon-text">data-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-data"></use>
          </svg>
          <p class="icon-text">data</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-data2-shape"></use>
          </svg>
          <p class="icon-text">data2-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-data2"></use>
          </svg>
          <p class="icon-text">data2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dedent"></use>
          </svg>
          <p class="icon-text">dedent</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-delete"></use>
          </svg>
          <p class="icon-text">delete</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dialogue-empty-shape"></use>
          </svg>
          <p class="icon-text">dialogue-empty-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dialogue-empty"></use>
          </svg>
          <p class="icon-text">dialogue-empty</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dialogue-shape"></use>
          </svg>
          <p class="icon-text">dialogue-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dialogue"></use>
          </svg>
          <p class="icon-text">dialogue</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-dispirited"></use>
          </svg>
          <p class="icon-text">dispirited</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-docker"></use>
          </svg>
          <p class="icon-text">docker</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-down-shape"></use>
          </svg>
          <p class="icon-text">down-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-import"></use>
          </svg>
          <p class="icon-text">import</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-edit"></use>
          </svg>
          <p class="icon-text">edit</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-edit2"></use>
          </svg>
          <p class="icon-text">edit2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-ellipsis"></use>
          </svg>
          <p class="icon-text">ellipsis</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-email-shape"></use>
          </svg>
          <p class="icon-text">email-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-email"></use>
          </svg>
          <p class="icon-text">email</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-empty-shape"></use>
          </svg>
          <p class="icon-text">empty-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-empty"></use>
          </svg>
          <p class="icon-text">empty</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-end"></use>
          </svg>
          <p class="icon-text">end</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-exclamation-circle-shape"></use>
          </svg>
          <p class="icon-text">exclamation-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-exclamation-circle"></use>
          </svg>
          <p class="icon-text">exclamation-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-exclamation-triangle-shape"></use>
          </svg>
          <p class="icon-text">exclamation-triangle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-exclamation-triangle"></use>
          </svg>
          <p class="icon-text">exclamation-triangle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-exclamation"></use>
          </svg>
          <p class="icon-text">exclamation</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-execute"></use>
          </svg>
          <p class="icon-text">execute</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-eye-shape"></use>
          </svg>
          <p class="icon-text">eye-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-eye-slash-shape"></use>
          </svg>
          <p class="icon-text">eye-slash-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-eye-slash"></use>
          </svg>
          <p class="icon-text">eye-slash</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-eye"></use>
          </svg>
          <p class="icon-text">eye</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file-plus-shape"></use>
          </svg>
          <p class="icon-text">file-plus-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file-plus"></use>
          </svg>
          <p class="icon-text">file-plus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file-shape"></use>
          </svg>
          <p class="icon-text">file-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file"></use>
          </svg>
          <p class="icon-text">file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder-open-shape"></use>
          </svg>
          <p class="icon-text">folder-open-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder-open"></use>
          </svg>
          <p class="icon-text">folder-open</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder-plus-shape"></use>
          </svg>
          <p class="icon-text">folder-plus-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder-plus"></use>
          </svg>
          <p class="icon-text">folder-plus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder-shape"></use>
          </svg>
          <p class="icon-text">folder-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-folder"></use>
          </svg>
          <p class="icon-text">folder</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-full-screen"></use>
          </svg>
          <p class="icon-text">full-screen</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-heart-shape"></use>
          </svg>
          <p class="icon-text">heart-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-heart"></use>
          </svg>
          <p class="icon-text">heart</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-hide"></use>
          </svg>
          <p class="icon-text">hide</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-home"></use>
          </svg>
          <p class="icon-text">home</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-id-shape"></use>
          </svg>
          <p class="icon-text">id-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-id"></use>
          </svg>
          <p class="icon-text">id</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-image-shape"></use>
          </svg>
          <p class="icon-text">image-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-image"></use>
          </svg>
          <p class="icon-text">image</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-indent"></use>
          </svg>
          <p class="icon-text">indent</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-circle-shape"></use>
          </svg>
          <p class="icon-text">info-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-circle"></use>
          </svg>
          <p class="icon-text">info-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-info-2"></use>
          </svg>
          <p class="icon-text">info-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-key-2"></use>
          </svg>
          <p class="icon-text">key-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-left-shape"></use>
          </svg>
          <p class="icon-text">left-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-line-chart"></use>
          </svg>
          <p class="icon-text">line-chart</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-list"></use>
          </svg>
          <p class="icon-text">list</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-lock-shape"></use>
          </svg>
          <p class="icon-text">lock-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-lock"></use>
          </svg>
          <p class="icon-text">lock</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-minus-circle-shape"></use>
          </svg>
          <p class="icon-text">minus-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-minus-circle"></use>
          </svg>
          <p class="icon-text">minus-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-minus-square-shape"></use>
          </svg>
          <p class="icon-text">minus-square-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-minus-square"></use>
          </svg>
          <p class="icon-text">minus-square</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-minus"></use>
          </svg>
          <p class="icon-text">minus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-mobile-shape"></use>
          </svg>
          <p class="icon-text">mobile-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-mobile"></use>
          </svg>
          <p class="icon-text">mobile</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-monitors-cog"></use>
          </svg>
          <p class="icon-text">monitors-cog</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-more"></use>
          </svg>
          <p class="icon-text">more</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-move"></use>
          </svg>
          <p class="icon-text">move</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-next-shape"></use>
          </svg>
          <p class="icon-text">next-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-monitors"></use>
          </svg>
          <p class="icon-text">monitors</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-next"></use>
          </svg>
          <p class="icon-text">next</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-order-shape"></use>
          </svg>
          <p class="icon-text">order-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-order"></use>
          </svg>
          <p class="icon-text">order</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-panel-shape"></use>
          </svg>
          <p class="icon-text">panel-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-panel-permission"></use>
          </svg>
          <p class="icon-text">panel-permission</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-panel"></use>
          </svg>
          <p class="icon-text">panel</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-panels"></use>
          </svg>
          <p class="icon-text">panels</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-password-shape"></use>
          </svg>
          <p class="icon-text">password-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-password"></use>
          </svg>
          <p class="icon-text">password</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pc-shape"></use>
          </svg>
          <p class="icon-text">pc-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pause"></use>
          </svg>
          <p class="icon-text">pause</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pc"></use>
          </svg>
          <p class="icon-text">pc</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pie-chart-shape"></use>
          </svg>
          <p class="icon-text">pie-chart-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pie-chart"></use>
          </svg>
          <p class="icon-text">pie-chart</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pipeline-shape"></use>
          </svg>
          <p class="icon-text">pipeline-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pipeline"></use>
          </svg>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-play-shape"></use>
          </svg>
          <p class="icon-text">play-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-play-circle-shape"></use>
          </svg>
          <p class="icon-text">play-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-play"></use>
          </svg>
          <p class="icon-text">play</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-play2"></use>
          </svg>
          <p class="icon-text">play2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-play3"></use>
          </svg>
          <p class="icon-text">play3</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-circle-shape"></use>
          </svg>
          <p class="icon-text">plus-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-circle"></use>
          </svg>
          <p class="icon-text">plus-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-square-shape"></use>
          </svg>
          <p class="icon-text">plus-square-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-square"></use>
          </svg>
          <p class="icon-text">plus-square</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus"></use>
          </svg>
          <p class="icon-text">plus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-project"></use>
          </svg>
          <p class="icon-text">project</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-qq-shape"></use>
          </svg>
          <p class="icon-text">qq-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-qq"></use>
          </svg>
          <p class="icon-text">qq</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-question-circle-shape"></use>
          </svg>
          <p class="icon-text">question-circle-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-question-circle"></use>
          </svg>
          <p class="icon-text">question-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-question"></use>
          </svg>
          <p class="icon-text">question</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-refresh"></use>
          </svg>
          <p class="icon-text">refresh</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-right-shape"></use>
          </svg>
          <p class="icon-text">right-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-save-shape"></use>
          </svg>
          <p class="icon-text">save-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-save"></use>
          </svg>
          <p class="icon-text">save</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-script-file"></use>
          </svg>
          <p class="icon-text">script-file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-script-files"></use>
          </svg>
          <p class="icon-text">script-files</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-search"></use>
          </svg>
          <p class="icon-text">search</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-sina"></use>
          </svg>
          <p class="icon-text">sina</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-sitemap-shape"></use>
          </svg>
          <p class="icon-text">sitemap-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-sitemap"></use>
          </svg>
          <p class="icon-text">sitemap</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-smile-shape"></use>
          </svg>
          <p class="icon-text">smile-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-smile"></use>
          </svg>
          <p class="icon-text">smile</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-sort"></use>
          </svg>
          <p class="icon-text">sort</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-star-3"></use>
          </svg>
          <p class="icon-text">star-3</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-star-shape"></use>
          </svg>
          <p class="icon-text">star-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stop-shape"></use>
          </svg>
          <p class="icon-text">stop-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stop"></use>
          </svg>
          <p class="icon-text">stop</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-application-shape"></use>
          </svg>
          <p class="icon-text">tree-application-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-application"></use>
          </svg>
          <p class="icon-text">tree-application</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-group-shape"></use>
          </svg>
          <p class="icon-text">tree-group-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-group"></use>
          </svg>
          <p class="icon-text">tree-group</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-module-shape"></use>
          </svg>
          <p class="icon-text">tree-module-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-module"></use>
          </svg>
          <p class="icon-text">tree-module</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-process-shape"></use>
          </svg>
          <p class="icon-text">tree-process-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tree-process"></use>
          </svg>
          <p class="icon-text">tree-process</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-unlock-shape"></use>
          </svg>
          <p class="icon-text">unlock-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-un-full-screen"></use>
          </svg>
          <p class="icon-text">un-full-screen</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-unlock"></use>
          </svg>
          <p class="icon-text">unlock</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-up-shape"></use>
          </svg>
          <p class="icon-text">up-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-user-shape"></use>
          </svg>
          <p class="icon-text">user-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-upload"></use>
          </svg>
          <p class="icon-text">upload</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-user"></use>
          </svg>
          <p class="icon-text">user</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-weixin-shape"></use>
          </svg>
          <p class="icon-text">weixin-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-weixin"></use>
          </svg>
          <p class="icon-text">weixin</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-work-manage"></use>
          </svg>
          <p class="icon-text">work-manage</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-star-cover"></use>
          </svg>
          <p class="icon-text">star-cover</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-offline"></use>
          </svg>
          <p class="icon-text">offline</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-excel-fill"></use>
          </svg>
          <p class="icon-text">excel-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file-fill"></use>
          </svg>
          <p class="icon-text">file-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-deploy-preparation"></use>
          </svg>
          <p class="icon-text">deploy-preparation</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-deploy-build"></use>
          </svg>
          <p class="icon-text">deploy-build</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-deploy-release"></use>
          </svg>
          <p class="icon-text">deploy-release</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-restore-screen"></use>
          </svg>
          <p class="icon-text">restore-screen</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-full-screen-new"></use>
          </svg>
          <p class="icon-text">full-screen-new</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-git-code"></use>
          </svg>
          <p class="icon-text">git-code</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-go"></use>
          </svg>
          <p class="icon-text">go</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-golang"></use>
          </svg>
          <p class="icon-text">golang</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-nodejs"></use>
          </svg>
          <p class="icon-text">nodejs</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-python"></use>
          </svg>
          <p class="icon-text">python</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-svn"></use>
          </svg>
          <p class="icon-text">svn</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-gitlab-2"></use>
          </svg>
          <p class="icon-text">gitlab-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-nodejs-2"></use>
          </svg>
          <p class="icon-text">nodejs-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-diff-2"></use>
          </svg>
          <p class="icon-text">diff-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-lesscode"></use>
          </svg>
          <p class="icon-text">lesscode</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-upload-2"></use>
          </svg>
          <p class="icon-text">upload-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-git"></use>
          </svg>
          <p class="icon-text">git</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-page-fill"></use>
          </svg>
          <p class="icon-text">page-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-organization"></use>
          </svg>
          <p class="icon-text">organization</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-cloudapi"></use>
          </svg>
          <p class="icon-text">cloudapi</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-insights"></use>
          </svg>
          <p class="icon-text">insights</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-bold-close"></use>
          </svg>
          <p class="icon-text">bold-close</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-time"></use>
          </svg>
          <p class="icon-text">time</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-project"></use>
          </svg>
          <p class="icon-text">project</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-down"></use>
          </svg>
          <p class="icon-text">angle-double-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-double-up"></use>
          </svg>
          <p class="icon-text">angle-double-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-line-down"></use>
          </svg>
          <p class="icon-text">angle-line-down</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-angle-line-up"></use>
          </svg>
          <p class="icon-text">angle-line-up</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-overview"></use>
          </svg>
          <p class="icon-text">overview</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-setting-2"></use>
          </svg>
          <p class="icon-text">setting-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-publish-fill"></use>
          </svg>
          <p class="icon-text">publish-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-log-2"></use>
          </svg>
          <p class="icon-text">log-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-alert"></use>
          </svg>
          <p class="icon-text">alert</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-alert2"></use>
          </svg>
          <p class="icon-text">alert2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-member"></use>
          </svg>
          <p class="icon-text">member</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-version"></use>
          </svg>
          <p class="icon-text">version</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-help-2"></use>
          </svg>
          <p class="icon-text">help-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-plus-circle"></use>
          </svg>
          <p class="icon-text">plus-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-back"></use>
          </svg>
          <p class="icon-text">back</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-ceshi"></use>
          </svg>
          <p class="icon-text">ceshi</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-zhengshi"></use>
          </svg>
          <p class="icon-text">zhengshi</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-diff"></use>
          </svg>
          <p class="icon-text">diff</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-debug"></use>
          </svg>
          <p class="icon-text">debug</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stop"></use>
          </svg>
          <p class="icon-text">stop</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-refresh-line"></use>
          </svg>
          <p class="icon-text">refresh-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-download"></use>
          </svg>
          <p class="icon-text">download</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-stop-2"></use>
          </svg>
          <p class="icon-text">stop-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-organization"></use>
          </svg>
          <p class="icon-text">organization</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-user"></use>
          </svg>
          <p class="icon-text">user</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-user2"></use>
          </svg>
          <p class="icon-text">user2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-file"></use>
          </svg>
          <p class="icon-text">file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-process"></use>
          </svg>
          <p class="icon-text">process</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-configuration"></use>
          </svg>
          <p class="icon-text">configuration</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-api"></use>
          </svg>
          <p class="icon-text">api</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-wangguan"></use>
          </svg>
          <p class="icon-text">wangguan</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-api-2"></use>
          </svg>
          <p class="icon-text">api-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-pv"></use>
          </svg>
          <p class="icon-text">pv</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-process-2"></use>
          </svg>
          <p class="icon-text">process-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-abnormal"></use>
          </svg>
          <p class="icon-text">abnormal</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-normal"></use>
          </svg>
          <p class="icon-text">normal</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-default"></use>
          </svg>
          <p class="icon-text">default</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-success"></use>
          </svg>
          <p class="icon-text">success</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-failed"></use>
          </svg>
          <p class="icon-text">failed</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-waiting"></use>
          </svg>
          <p class="icon-text">waiting</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-warning-2"></use>
          </svg>
          <p class="icon-text">warning-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-unknown"></use>
          </svg>
          <p class="icon-text">unknown</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-lishijilu"></use>
          </svg>
          <p class="icon-text">lishijilu</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-bushu"></use>
          </svg>
          <p class="icon-text">bushu</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-keguance"></use>
          </svg>
          <p class="icon-text">keguance</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-peizhi"></use>
          </svg>
          <p class="icon-text">peizhi</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-jingxiang"></use>
          </svg>
          <p class="icon-text">jingxiang</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-guifan"></use>
          </svg>
          <p class="icon-text">guifan</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-anquan"></use>
          </svg>
          <p class="icon-text">anquan</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-duliang"></use>
          </svg>
          <p class="icon-text">duliang</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-deploy-item-dot"></use>
          </svg>
          <p class="icon-text">deploy-item-dot</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-shouqi"></use>
          </svg>
          <p class="icon-text">shouqi</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-zhankai"></use>
          </svg>
          <p class="icon-text">zhankai</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tableminus"></use>
          </svg>
          <p class="icon-text">tableminus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-tableplus"></use>
          </svg>
          <p class="icon-text">tableplus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-gitlab-3"></use>
          </svg>
          <p class="icon-text">gitlab-3</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-jiangxu"></use>
          </svg>
          <p class="icon-text">jiangxu</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#paasng-shengxu"></use>
          </svg>
          <p class="icon-text">shengxu</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
          <li>支持彩色图标</li>
          <li>跨 SVG 使用，使用 use 可调用文档中加载的所有 SVG 图标 </li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将下载的资源文件中 iconcool.js 文件外部资源通过 script 标签引入</li>
        <li>在 html 模板文件中挑选对应的对应图标的名称使用，例如：
          <pre>
    &lt;svg aria-hidden="true"&gt;
      &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
    &lt;/svg&gt;
          </pre>
        </li>
      </ul>
      </section>
    </section>
  </div>
  <script>
    document.addEventListener('click', function (e) {
      if (event.target.classList.contains('tab-panel')) {
        const type = event.target.dataset.type
        const tabPanels = document.querySelectorAll('.tab-panel')
        const tabContents = document.querySelectorAll('.tab-content')

        tabPanels.forEach(function(item) {
          item.classList.remove('active')
        })

        e.target.classList.add('active')
        
        tabContents.forEach(function (item) {
          const contentType = item.dataset.type
          if (contentType === type) {
            item.classList.add('active')
          } else {
            item.classList.remove('active')
          }
        })
      }
      
    })
  </script>
</body>
</html>